<!--分区域-->
<template>
  <div class="budgetRelease">
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader  :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="年度">
          <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择年"></el-date-picker>
        </el-form-item>
       <el-form-item style="width: 35%;">
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
          <el-button size="small" type="orange" @click="allExportModal()">批量导出</el-button>
           <el-button size="small" type="orange" @click="exportModal()">导出</el-button>
        </el-form-item>
        <el-form-item class="annual">
          <template>
            <div class="title">筛选条件：</div>
            <div class="border">
             <!-- <div><span class="paddRig">跟踪指标：</span>
              <el-checkbox-group v-model="trackingArr"  @change="trackingClick">
                 <el-checkbox v-for="(item,index) in trackType"  :label="item" :key="index" >{{item.indexName}}</el-checkbox>
              </el-checkbox-group>
              </div> -->
              <div><span class="paddRig">跟踪维度：</span>

               <el-radio-group v-model="form.radio" @change='checedRadio'>
                  <el-radio :label="1">全部明细</el-radio>
                  <el-radio :label="2">只看进度</el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
        </el-form-item>

      </el-form>
    </div>
 <p class="g-unit">单位: 万元</p>
 <div v-show="form.radio==1">
 <div class="tableBox" >
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        ref="table"
        :span-method="arraySpanMethod"
      >
     <el-table-column label="" prop="productName" class-name="first-title" width="100" fixed></el-table-column>
     <el-table-column label="" prop="class1Name" class-name="second-title" width="100" fixed></el-table-column>
          <el-table-column v-for="(item,index) in colDefList" :key="index" :label="item">
               <el-table-column width="100" label="目标值" :prop="'targetValue'+(index)"></el-table-column>
               <el-table-column width="100" label="实际完成" :prop="'actValue'+(index)"></el-table-column>
               <el-table-column label="完成进度(%)" :prop="'process'+(index)"></el-table-column>
          </el-table-column>
      </el-table>
    </div>
  </div>
    <!-- 只看进度 -->
    <div v-show="form.radio==2">
    <div class="tableBox" >
         <el-table
           v-loading="tableLoading"
           :data="tableData1"
           height="85vh"
           style="width: 100%"
           class="tableTh28"
           border
           stripe
           ref="table2"
           :span-method="arraySpanMethod"
         >
         <el-table-column label="" prop="productName" class-name="first-title" width="100" fixed></el-table-column>
          <el-table-column label="" prop="class1Name" class-name="second-title" width="100" fixed></el-table-column>

            <el-table-column v-for="(item,index) in colDefList1" :key="index" :label="item" :prop="'process'+(index)"> </el-table-column>

         </el-table>
       </div>
  </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI"
import { getSessionStorage } from "@/common/js/storage";
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
import {getCookie} from "@/common/js/cookie"
let accountInfo = JSON.parse(getSessionStorage('accountInfo'))

export default {
  name: "fenqy",
  props:{
    areaList:{
      type:Array,
      default:()=>([])
    }
  },
  data() {
    return {
      form: {
        areaId: accountInfo.areaId,
        year: '',
        dimension:1,
        radio:1,
      },
      accountInfo: "",
        checkList: [],
        indexType:3,
        trackType:[],
        trackingList:[],
        trackingArr:[],
       checked:[],
       indexTypeStr:[],
       trackMonthStr:[],
       colDefList:[],
       colDefList1:[],
       tableData:[],
       tableData1:[],

       spanArr:[],
       tableLoading: false,
    };
  },
 mounted(){
  this.getParams();
 },
  methods: {
    async getParams(){
        this.form.year = await this.getMaxMonthByTrackType();
        this.submitHandle();
       },

   //获取年份
   getMaxMonthByTrackType(){
     var that = this
      return new Promise(resolve => {
      $budgetAPI.getMaxMonthByTrackType(
      {
        indexType:this.indexType,
        areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
      },
      res => {
       if (res && res.code == 0) {
          that.form.year = res.content;

           resolve (res.content)
       }
     },
     err => {}
       );
       });
     },

    //获取跟踪维度
    checedRadio(val){
      this.form.radio = val
      this.submitHandle()
    },
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if(this.tableData.length>0 || this.tableData1.length>0){
            if (columnIndex == 0 || columnIndex == 1 ) {

                return this.spanArr[rowIndex][columnIndex];

            }
        }

    },
    //点击查询
   async  submitHandle() {
      let params ={
        areaId : this.form.areaId ? this.form.areaId:this.accountInfo.areaId,
        testYear : this.form.year,
        indexType:3
      }
      this.getData(params);
    },
    getData(params) {
      if(this.form.radio == 1){
       this.tableLoading = true;
         var that=this
         $budgetAPI.getReleaseTrackData(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList = res.content.areaNames
              res.content.data.map((item,index)=>{
              item.dataList.map((ele,ind) => {
                   item['targetValue'+ind] = ele.targetValue
                   item['actValue'+ind] = ele.actValue
                   item['process'+ind] = ele.process
               })
              });
              that.tableData = res.content.data;
              this.spanArr = mergeSpan( that.tableData, [
              "productName",
              "class1Name",
             ]);
            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
              this.$refs.table.doLayout();

            },500);

          });
      }else{
       this.tableLoading = true;
         var that=this
         $budgetAPI.getReleaseTrackData(params,res => {
            if (res.code === 0) {
              that.tableLoading = false
              that.colDefList1= res.content.areaNames
              res.content.data.map((item,index)=>{
              item.dataList.map((ele,ind) => {
                   item['process'+ind] = ele.process
               })
              });
              that.tableData1 = res.content.data;
              this.spanArr = mergeSpan( that.tableData1, [
                "productName",
                "class1Name",
              ]);

            } else {
              this.alertError(res);
            }
            setTimeout(()=>{
             this.$refs.table2.doLayout();

            },500);
          });

      }
    },
   //批量导出
    allExportModal() {
      let areaId = this.form.areaId;
      let testYear = this.form.year;
      // let indexTypeStr = JSON.stringify(this.trackingArr);
      // let trackMonthStr = JSON.stringify(this.trackMonthStr);
      let indexType=3;
      let token = getCookie('token');
        // 根据不同模式切换不同的路径
    if(this.form.radio == 1){
     let isShowDetail=true;
    // 根据不同模式切换不同的路径
    if (process.env.NODE_ENV == "development") {
      window.location.href =
        prefixAPI.loc +
        `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    } else if (process.env.NODE_ENV == "production") {
      window.location.href =
        prefixAPI.hp +
         `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    }
  }else{
    let isShowDetail=false;
    // 根据不同模式切换不同的路径
    if (process.env.NODE_ENV == "development") {
      window.location.href =
        prefixAPI.loc +
       `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    } else if (process.env.NODE_ENV == "production") {
      window.location.href =
        prefixAPI.hp +
       `/api/releaseTrack/exportBatchReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    }
  }
      },
    //导出
    exportModal() {
      let areaId = this.form.areaId;
      let testYear = this.form.year;
      // let indexTypeStr = JSON.stringify(this.trackingArr);
      // let trackMonthStr = JSON.stringify(this.trackMonthStr);
      let indexType=3;
      let token = getCookie('token');
        // 根据不同模式切换不同的路径
    if(this.form.radio == 1){
     let isShowDetail=true;
    // 根据不同模式切换不同的路径
    if (process.env.NODE_ENV == "development") {
      window.location.href =
        prefixAPI.loc +
        `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    } else if (process.env.NODE_ENV == "production") {
      window.location.href =
        prefixAPI.hp +
         `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    }
  }else{
    let isShowDetail=false;
    // 根据不同模式切换不同的路径
    if (process.env.NODE_ENV == "development") {
      window.location.href =
        prefixAPI.loc +
       `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    } else if (process.env.NODE_ENV == "production") {
      window.location.href =
        prefixAPI.hp +
       `/api/releaseTrack/exportReleaseTrackData?areaId=${areaId}&testYear=${testYear}&indexType=${indexType}&isShowDetail=${isShowDetail}&token=${token}`;
    }
  }
      },

  }
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
.budgetRelease {
  .tableBox {
    .first-title.is-leaf {
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
         color: #d7e5fb;
        }
    }

    .second-title.is-leaf {
      overflow: visible;
      .cell {
        transform: translateX(-60%);
      }
    }

  }

  .operation {
    .annual {
       width: 100%;
       padding-left: 20px;
       .el-form-item__content{
         width: 100%;
       }
       .title{font-size: 18px;}
       .paddRig{
         padding-right: 25px;
        }
        .border{
          border: 1px solid #DCDFE6;
          padding: 0 20px;
          margin-bottom: 10px;
          .el-checkbox-group{
            display: inline-block;
          }
        }
  }
  .btnForm{
    float: right;
    .el-form-item__content{
      float: right;
      width: 100%;
      .export{
        float:right;
      }
    }
  }
 }
}
</style>
